<!-- 求职记录 -->
<template>
    <view class="cu-list menu list">
        <view
            v-for="(item,idx) in jobRecordList"
            :key="idx"
            class="cu-item grayscale"
            @click="gotoDetails(item.jobId)"
         >
            <view class='content'>
                <view class="overflow-hidden">{{item.jobTitle}}</view>
                <view class="text-gray text-sm overflow-hidden">
                    <text class='icon-locationfill text-orange'></text>
                    {{item.locationDetail}}
                </view>
                <view class='text-sm'>
                    <!-- 最多只显示4个 -->
                    <view
                        v-for="(tag,tagIndex) in item.jobTags"
                        :key="tagIndex"
                        v-if="tagIndex < 4"
                        class="cu-tag radius bg-grey"
                    >{{tag}}</view>
                </view>
                <view class="text-olive text-sm">
                    <text>报名状态:</text>
                    <text>{{statusRelation[item.status]}}</text>
                </view>
            </view>
            <view class='action'>
                <view class='text-orange padding-xs'>{{item.jobSalary}}</view>
                <view v-if="item.deliveryTime" class="text-gray padding-xs">{{item.deliveryTime}}</view>
                <button v-if="item.status === 'reject'" @click.stop="continueDeliveryClick(item.jobId)" class='cu-btn line-yellow round sm'>继续报名</button>
                <button v-if="item.status === 'pending'" @click.stop="cancleDeliveryClick(item.jobId, item.applyNo)" class='cu-btn bg-gray shadow-blur round sm'>取消报名</button>
            </view>
        </view>
    </view>
</template>

<script>
import store from '@/store';
import {
    getJobRecord,
    cancleDelivery
} from './model/result.model';

export default {
    data () {
        return {
            tagColor: ['bg-orange', 'bg-olive', 'bg-blue'],
            statusRelation: {
                pending: '待筛选',
                cancle: '已取消',
                success: '已通过',
                reject: '未通过，你是我司得不到的人'
            }
        };
    },
    onLoad () {
        wx.setNavigationBarTitle({     
            title: "求职记录"
        })
    },
    onShow() {
        // 切换页面时获取求职记录
        this.getJobRecordHandler();
        // getJobRecord({ 
        //     userId: this.$store.state.userInfo.userId
        // })
    },
    onPullDownRefresh() {
        wx.showNavigationBarLoading(); // 显示顶部刷新图标
        this.getJobRecordHandler();
    },
    computed: {
        jobRecordList() {
            return this.$store.state.jobRecordList || [];
        }
    },
    methods: {
        getJobRecordHandler() {
            getJobRecord({  //获取求职记录
                userId: this.$store.state.userInfo.userId
            }).then(()=>{
                wx.hideNavigationBarLoading(); // 隐藏导航栏加载框
                wx.stopPullDownRefresh(); // 停止下拉动作
            })
        },
        gotoDetails(jobId) {
            wx.navigateTo({
                url: '/pages/details/main?jobId='+jobId
            })
        },
        continueDeliveryClick(jobId) {
            wx.navigateTo({
                url: '/pages/user-info/main?action=delivery&jobId='+jobId
            })
        },
        cancleDeliveryClick(jobId, applyNo) {
            cancleDelivery({
                userId: this.$store.state.userInfo.userId,
                jobId: jobId,
                applyNo: applyNo
            }).then((res)=>{
                wx.showToast({
                    title: res.message
                })
                $_timer = setTimeout(function () {
                    // 刷新页面
                    getJobRecord({ 
                        userId: this.$store.state.userInfo.userId
                    })
                }.bind(this), 1500);
            })
        }
    }
}

</script>
<style lang='less' scoped>
/deep/ .cu-tag {
    font-size: 18rpx;
}
/deep/ .cu-list>.cu-item {
    height:210rpx;
}
.company-img {
    width:120rpx;
    height:120rpx;
    line-height:90rpx;
    font-size:22rpx;
}
.cu-item:hover {
    background-color:#fcf7e9;
}
.cu-item:visited {
    background-color:#fcf7e9;
}
.overflow-hidden {
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
</style>